
<template>
  <div class="echarts">
    <div :style="{ height: '800px', width: '80%' }"  ref="myEchart"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";
import Vue from "vue";

Vue.prototype.axios = axios;
//   import '../../node_modules/echarts/map/js/world.js'
import 'echarts/map/js/china.js';
export default {
  name: "echarts",
  props: ["userJson"],
  data() {
    return {
      datae: [],
      chart: null,
    };
    data: [];
  },

  mounted() {
    /** 1.这里是异步 */
	var server = this.$myConfig.server
    axios.get( server+"/distribution/provinceInfo").then((response) => {

      //console.log(response.data);
	   for (var i = 0; i < response.data.data.length; i++) {
		   this.datae.push({
			name:response.data.data[i].province,
		   value:response.data.data[i].usercount
		   })
		   }
		   //console.log(this.datae);
      /** 4. 第4步放到请求内部调用就没问题了 */
      this.chinaConfigure();
    });
    /** 2.这里是同步方法 */
    this.chinaConfigure();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    chinaConfigure() {
        /** 3.这里是同步方法 第一步有时候还没请求回来这里就已经执行了, 所以你永远拿不到数据 */
      
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      window.onresize = myChart.resize;
      var that = this;
      myChart.setOption({
        // 进行相关配置
        tittle: {
          text: "网上自习室在线人数",
          left: "center",
        },
       
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          type: "piecewise", // 定义为分段型 visualMap
          min: 0,
          max: 1000,
          itemWidth: 40,
          bottom: 60,
          left: 20,
          pieces: [
            // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
            { gt: 201, lte: 999999, label: "200人以上", color: "#6ad86e" }, // (900, 1000]
            { gt: 101, lte: 200, label: "101-200人", color: "#9adcfa" }, // (500, 900]
            { gt: 51, lte: 100, label: "51-100人", color: "#ffeb3b" }, // (310, 500]
            { gt: 11, lte: 50, label: "11-50人", color: "#ff9800" }, // (200, 300]
            { gt: 1, lte: 10, label: "1-10人", color: "orangered" }, // (10, 200]
            { value: 0, label: "无用户", color: "#999" }, // [0]
          ],
        },
        visualMap: {
          // 左下角的颜色区域
          type: "piecewise", // 定义为分段型 visualMap
          min: 0,
          max: 1000,
          itemWidth: 40,
          bottom: 60,
          left: 20,
          pieces: [
            // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
            { gt: 900, lte: 1000, label: "非常好", color: "#6ad86e" }, // (900, 1000]
            { gt: 500, lte: 900, label: "正常", color: "#9adcfa" }, // (500, 900]
            { gt: 310, lte: 500, label: "警告", color: "#ffeb3b" }, // (310, 500]
            { gt: 200, lte: 300, label: "较差", color: "#ff9800" }, // (200, 300]
            { gt: 10, lte: 200, label: "非常差", color: "orangered" }, // (10, 200]
            { value: 0, label: "无数据", color: "#999" }, // [0]
          ],
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: "rgba(0,0,0,0.4)",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(170, 255, 0, 0.2)",
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 对应上方配置
          },
          {
            name: "人数", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: this.datae,
          },
        ],
      });
    },
  },
};
</script>
<style>
.echarts {
position: relative;
top: -200px;
left: 100px;
margin: auto;
}
</style>
